ರಿಯಾಕ್ಟ್ useEvent ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ವಿಶ್ಲೇಷಣೆಯ ಒಂದು ಆಳವಾದ ನೋಟ

ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್‌ನ ವೇಗದ ಜಗತ್ತಿನಲ್ಲಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಕೇವಲ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಲ್ಲ; ಅದೊಂದು ಮೂಲಭೂತ ಅವಶ್ಯಕತೆಯಾಗಿದೆ. ಜಾಗತಿಕ ಮಟ್ಟದಲ್ಲಿ, ವಿವಿಧ ಸಾಧನ ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ವೇಗಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ವೇಗವಾಗಿ, ಸರಾಗವಾಗಿ ಮತ್ತು ಸ್ಪಂದನಶೀಲವಾಗಿರಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ, ಇದರರ್ಥ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಲು, ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ತಕ್ಷಣವೇ ಆಗುವಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿರಂತರವಾಗಿ ಮಾರ್ಗಗಳನ್ನು ಹುಡುಕುವುದು. ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಯ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ, ಆದರೆ ಮೋಸಗೊಳಿಸುವಷ್ಟು ಸಂಕೀರ್ಣವಾದ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಒಂದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದೆ.

ರಿಯಾಕ್ಟ್‌ನ ವಿಕಸನವು ನಿರಂತರವಾಗಿ ಡೆವಲಪರ್ ಅನುಕೂಲ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತಾ ಬಂದಿದೆ. ಹುಕ್ಸ್ ನಾವು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬರೆಯುವ ವಿಧಾನದಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದವು, ಆದರೆ ಅವು ಹೊಸ ಮಾದರಿಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಪಾಯಗಳನ್ನು ಸಹ ಪರಿಚಯಿಸಿದವು, ವಿಶೇಷವಾಗಿ useCallback ಮತ್ತು useMemo ನಂತಹ ಹುಕ್ಸ್‌ನೊಂದಿಗೆ ಮೆಮೊೈಸೇಶನ್ ಸುತ್ತ. ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳು ಮತ್ತು ಹಳೆಯ ಕ್ಲೋಶರ್‌ಗಳ ಸಂಕೀರ್ಣತೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ, ರಿಯಾಕ್ಟ್ ತಂಡವು ಹೊಸ ಹುಕ್ ಅನ್ನು ಪ್ರಸ್ತಾಪಿಸಿತು: useEvent.

useEvent ಇನ್ನೂ ರಿಯಾಕ್ಟ್‌ನ ಸ್ಥಿರ ಆವೃತ್ತಿಯಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೂ ಮತ್ತು ಅದರ ಅಂತಿಮ ರೂಪವು ಬದಲಾಗಬಹುದಾದರೂ, ಅದು ಪ್ರತಿನಿಧಿಸುವ ಪರಿಕಲ್ಪನೆಯು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಮೆಮೊೈಸೇಶನ್ ಬಗ್ಗೆ ನಾವು ಯೋಚಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ದೊಡ್ಡ ಬದಲಾವಣೆಯಾಗಿದೆ. ಈ ಲೇಖನವು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸುವ ಬಗ್ಗೆ ಆಳವಾದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ, useEvent ಹಿಂದಿನ ತತ್ವಗಳನ್ನು ನಮ್ಮ ಮಾರ್ಗದರ್ಶಿಯಾಗಿ ಬಳಸಿಕೊಂಡು. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಂದ ಉಂಟಾಗುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು ಮತ್ತು ಸ್ಪಷ್ಟವಾಗಿ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುವ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.

ಮೂಲ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಮತ್ತು ಮೆಮೊೈಸೇಶನ್ ಅಸ್ಥಿರತೆ

useEvent ಪ್ರಸ್ತಾಪಿಸುವ ಪರಿಹಾರವನ್ನು ಶ್ಲಾಘಿಸಲು, ಅದು ಪರಿಹರಿಸಲು ಉದ್ದೇಶಿಸಿರುವ ಸಮಸ್ಯೆಯನ್ನು ನಾವು ಮೊದಲು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಫಂಕ್ಷನ್‌ಗಳು ಫಸ್ಟ್-ಕ್ಲಾಸ್ ಸಿಟಿಜನ್‌ಗಳಾಗಿವೆ. ಇದರರ್ಥ ಅವುಗಳನ್ನು ಯಾವುದೇ ಇತರ ಮೌಲ್ಯದಂತೆ ರಚಿಸಬಹುದು, ರವಾನಿಸಬಹುದು ಮತ್ತು ಹಿಂತಿರುಗಿಸಬಹುದು. ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ, ಈ ನಮ್ಯತೆ ಶಕ್ತಿಯುತವಾಗಿದೆ, ಆದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚದೊಂದಿಗೆ ಬರುತ್ತದೆ.

ಒಂದು ವಿಶಿಷ್ಟ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಅದು ಪ್ರತಿ ಬಾರಿ ಮರು-ರೆಂಡರ್ ಆದಾಗ, ಅದರ ಬಾಡಿಯೊಳಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮರು-ರಚಿಸಲಾಗುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ದೃಷ್ಟಿಕೋನದಿಂದ, ಎರಡು ಫಂಕ್ಷನ್‌ಗಳು ಒಂದೇ ಕೋಡ್ ಹೊಂದಿದ್ದರೂ ಸಹ, ಅವು ಮೆಮೊರಿಯಲ್ಲಿ ವಿಭಿನ್ನ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಾಗಿವೆ. ಅವುಗಳಿಗೆ ವಿಭಿನ್ನ ಗುರುತುಗಳಿವೆ.

ಫಂಕ್ಷನ್ ಐಡೆಂಟಿಟಿ ಏಕೆ ಮುಖ್ಯ?

ಈ ಮರು-ರಚನೆಯು ನೀವು ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಪ್ರಾಪ್ಸ್ ಆಗಿ ರವಾನಿಸಿದಾಗ ಸಮಸ್ಯೆಯಾಗುತ್ತದೆ, ವಿಶೇಷವಾಗಿ React.memo ನಲ್ಲಿ ಸುತ್ತಿದವುಗಳಿಗೆ. React.memo ಒಂದು ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಅದರ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗದಿದ್ದರೆ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಹಳೆಯ ಮತ್ತು ಹೊಸ ಪ್ರಾಪ್ಸ್‌ಗಳ ನಡುವೆ ಶಾಲ್ಲೋ ಹೋಲಿಕೆಯನ್ನು ಮಾಡುತ್ತದೆ. ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಹೊಸದಾಗಿ ರಚಿಸಲಾದ ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ಡ್ ಚೈಲ್ಡ್‌ಗೆ ರವಾನಿಸಿದಾಗ, ಪ್ರಾಪ್ ಪರಿಶೀಲನೆ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ (ಏಕೆಂದರೆ oldFunction !== newFunction), ಇದರಿಂದ ಚೈಲ್ಡ್ ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಒಂದು ಕ್ಲಾಸಿಕ್ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

            
const MemoizedButton = React.memo(({ onClick, children }) => {
  console.log(`Rendering ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

function Counter() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // This function is re-created on EVERY render of Counter
  const handleIncrement = () => {
    setCount(c => c + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <MemoizedButton onClick={handleIncrement}>
        Increment Count
      </MemoizedButton>
      <button onClick={() => setOtherState(s => !s)}>
        Toggle Other State ({String(otherState)})
      </button>
    </div>
  );
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನೀವು "Toggle Other State" ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ, Counter ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಇದು handleIncrement ಅನ್ನು ಮರು-ರಚಿಸಲು ಕಾರಣವಾಗುತ್ತದೆ. ಕೌಂಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸುವ ಲಾಜಿಕ್ ಬದಲಾಗದಿದ್ದರೂ, ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು MemoizedButton ಗೆ ರವಾನಿಸಲಾಗುತ್ತದೆ, ಅದರ ಮೆಮೊೈಸೇಶನ್ ಅನ್ನು ಮುರಿದು, ಅದು ಮರು-ರೆಂಡರ್ ಆಗಲು ಕಾರಣವಾಗುತ್ತದೆ. ಆ ಬಟನ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಏನೂ ಬದಲಾಗದಿದ್ದರೂ ಸಹ ನೀವು ಕನ್ಸೋಲ್‌ನಲ್ಲಿ "Rendering Increment Count" ಎಂದು ನೋಡುತ್ತೀರಿ.

`useCallback` ಪರಿಹಾರ ಮತ್ತು ಅದರ ಮಿತಿಗಳು

ಇದಕ್ಕೆ ಸಾಂಪ್ರದಾಯಿಕ ಪರಿಹಾರವೆಂದರೆ useCallback ಹುಕ್. ಇದು ಫಂಕ್ಷನ್ ಅನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ, ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾಗದ ಹೊರತು ಮರು-ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಅದರ ಐಡೆಂಟಿಟಿ ಸ್ಥಿರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

            
import { useState, useCallback } from 'react';

// ... inside Counter component
const handleIncrement = useCallback(() => {
  setCount(c => c + 1);
}, []); // Empty dependency array, function is created only once

            

              
                Copy
              
            
          

ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ ನಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಪ್ರಾಪ್ಸ್ ಅಥವಾ ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಬೇಕಾದರೆ ಏನು? ನಾವು ಅವುಗಳನ್ನು ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗೆ ಸೇರಿಸಬೇಕು.

            
function UserProfile({ userId }) {
  const [comment, setComment] = useState('');

  const handleSubmitComment = useCallback(() => {
    // This function needs access to userId and comment
    postCommentAPI(userId, { text: comment });
  }, [userId, comment]); // Dependencies

  return <CommentBox onSubmit={handleSubmitComment} />;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿದೆ ಸಂಕೀರ್ಣತೆ. comment ಬದಲಾದ ತಕ್ಷಣ, useCallback ಹೊಸ handleSubmitComment ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. CommentBox ಮೆಮೊೈಸ್ ಆಗಿದ್ದರೆ, ಕಾಮೆಂಟ್ ಫೀಲ್ಡ್‌ನಲ್ಲಿನ ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್‌ಗೆ ಅದು ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ನಾವು ಒಂದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಯನ್ನು ಇನ್ನೊಂದಕ್ಕೆ ವಿನಿಮಯ ಮಾಡಿಕೊಂಡಿದ್ದೇವೆ. ಇದೇ ಸವಾಲನ್ನು useEvent ಪ್ರಸ್ತಾಪವು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿದೆ.

`useEvent` ಪರಿಕಲ್ಪನೆಯ ಪರಿಚಯ: ಸ್ಥಿರ ಐಡೆಂಟಿಟಿ, ಫ್ರೆಶ್ ಸ್ಟೇಟ್

ರಿಯಾಕ್ಟ್ ತಂಡವು ಪ್ರಸ್ತಾಪಿಸಿದಂತೆ, useEvent ಹುಕ್ ಯಾವಾಗಲೂ ಸ್ಥಿರ ಐಡೆಂಟಿಟಿ ಹೊಂದಿರುವ (ಇದು ಮರು-ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಎಂದಿಗೂ ಬದಲಾಗುವುದಿಲ್ಲ) ಆದರೆ ಅದರ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಇತ್ತೀಚಿನ, "ಫ್ರೆಶ್" ಸ್ಟೇಟ್ ಮತ್ತು ಪ್ರಾಪ್ಸ್ ಅನ್ನು ಯಾವಾಗಲೂ ಪ್ರವೇಶಿಸಬಲ್ಲ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಫಂಕ್ಷನ್‌ನ ಐಡೆಂಟಿಟಿಯನ್ನು ಅದರ ಅನುಷ್ಠಾನದಿಂದ ಸೊಗಸಾಗಿ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.

ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ, ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

            
// This is a conceptual example. `useEvent` is not yet in stable React.
import { useEvent } from 'react';

function ChatRoom({ theme }) {
  const [text, setText] = useState('');

  const onSend = useEvent(() => {
    // Can access the latest 'text' and 'theme' without
    // needing them in a dependency array.
    sendMessage(text, theme);
  });

  // Because `onSend` has a stable identity, MemoizedSendButton
  // will not re-render just because `text` or `theme` changes.
  return <MemoizedSendButton onClick={onSend} />;
}

            

              
                Copy
              
            
          

ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ಈ ತತ್ವ: ಆಂತರಿಕವಾಗಿ ಇತ್ತೀಚಿನ ಲಾಜಿಕ್‌ಗೆ ಪಾಯಿಂಟ್ ಮಾಡುವ ಸ್ಥಿರ ಫಂಕ್ಷನ್ ರೆಫರೆನ್ಸ್. ಇದು ಮೆಮೊೈಸ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುವ ಡಿಪೆಂಡೆನ್ಸಿ ಸರಪಳಿಯನ್ನು ಮುರಿಯುತ್ತದೆ, ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಲಾಭಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್ ಏಕೆ ಮುಖ್ಯ?

useEvent ಪರಿಕಲ್ಪನೆಯು ಪ್ರಾಥಮಿಕವಾಗಿ ಅಸ್ಥಿರ ಫಂಕ್ಷನ್ ಐಡೆಂಟಿಟಿಗಳಿಂದಾಗಿ ಮರು-ರೆಂಡರಿಂಗ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚವನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮತ್ತೊಂದು, ಅಷ್ಟೇ ಮುಖ್ಯವಾದ ಅಂಶವಿದೆ: ಹ್ಯಾಂಡ್ಲರ್‌ನ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯ.

ನಿಧಾನಗತಿಯ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಿಂತಲೂ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಹೆಚ್ಚು ಹಾನಿಕಾರಕವಾಗಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಒಂದೇ ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದರಿಂದ, ದೀರ್ಘಕಾಲ ಚಾಲನೆಯಲ್ಲಿರುವ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಈ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸಬಹುದು. ಇದು ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ:

• ಜಿಗಿಜಿಗಿಯಾದ UI: ಬ್ರೌಸರ್ ಹೊಸ ಫ್ರೇಮ್‌ಗಳನ್ನು ಪೇಂಟ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅನಿಮೇಷನ್‌ಗಳು ಸ್ಥಗಿತಗೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್ ಅಸಮವಾಗುತ್ತದೆ.
• ಸ್ಪಂದಿಸದ ನಿಯಂತ್ರಣಗಳು: ಕ್ಲಿಕ್‌ಗಳು, ಕೀ ಪ್ರೆಸ್‌ಗಳು ಮತ್ತು ಇತರ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗಳು ಸರದಿಯಲ್ಲಿರುತ್ತವೆ ಮತ್ತು ಹ್ಯಾಂಡ್ಲರ್ ಮುಗಿಯುವವರೆಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳ್ಳುವುದಿಲ್ಲ, ಇದರಿಂದ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಗಿತಗೊಂಡಂತೆ ಭಾಸವಾಗುತ್ತದೆ.
• ಕಳಪೆ ಗ್ರಹಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಕಾರ್ಯವು ಅಂತಿಮವಾಗಿ ಪೂರ್ಣಗೊಂಡರೂ, ಆರಂಭಿಕ ವಿಳಂಬ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯ ಕೊರತೆಯು ನಿರಾಶಾದಾಯಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಈ ಕಾರಣಕ್ಕಾಗಿಯೇ ವೃತ್ತಿಪರ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರೊಫೈಲಿಂಗ್ ಒಂದು ಐಚ್ಛಿಕ ಹಂತವಲ್ಲ; ಇದು ಡೆವಲಪ್ಮೆಂಟ್ ಜೀವನಚಕ್ರದ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವಾಗಿದೆ. ನಾವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಊಹಿಸುವುದನ್ನು ಬಿಟ್ಟು ಅದನ್ನು ನಿಖರವಾಗಿ ಅಳೆಯಲು ಮುಂದಾಗಬೇಕು.

ವೃತ್ತಿಯ ಸಾಧನಗಳು: ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು

ಮರು-ರೆಂಡರ್‌ಗಳು ಮತ್ತು ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯ ಎರಡನ್ನೂ ವಿಶ್ಲೇಷಿಸಲು, ನಾವು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ ಸುಲಭವಾಗಿ ಲಭ್ಯವಿರುವ ಎರಡು ಶಕ್ತಿಯುತ ಸಾಧನಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

1. ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ (ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ)

ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಏಕೆ ಮತ್ತು ಯಾವಾಗ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ನಿಮ್ಮ ಗೋ-ಟು ಸಾಧನವಾಗಿದೆ. ಇದು ರೆಂಡರ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ದೃಶ್ಯೀಕರಿಸುತ್ತದೆ, ಯಾವ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಪ್‌ಡೇಟ್ ಆಗಿವೆ ಮತ್ತು ಅವು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಂಡಿವೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗಾಗಿ ಇದನ್ನು ಬಳಸುವುದು ಹೇಗೆ:

1. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಸ್ಥಾಪಿಸಲಾದ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ತೆರೆಯಿರಿ.
2. 'ಪ್ರೊಫೈಲರ್' ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ.
3. ರೆಕಾರ್ಡ್ ಬಟನ್ (ನೀಲಿ ವೃತ್ತ) ಕ್ಲಿಕ್ ಮಾಡಿ.
4. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಕ್ರಿಯೆಯನ್ನು ಮಾಡಿ (ಉದಾ., ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ).
5. ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ.

ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಅನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. ಮರು-ರೆಂಡರ್ ಆದ ಕಾಂಪೊನೆಂಟ್ ಮೇಲೆ ನೀವು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬಲಭಾಗದಲ್ಲಿರುವ ಪ್ಯಾನೆಲ್ ಅದು ಏಕೆ ಮರು-ರೆಂಡರ್ ಆಯಿತು ಎಂದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ. ಇದು ಪ್ರಾಪ್ ಬದಲಾವಣೆಯಿಂದಾಗಿದ್ದರೆ, ಯಾವ ಪ್ರಾಪ್ ಬದಲಾಗಿದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಬಹುದು. ಪ್ರತಿ ಪೇರೆಂಟ್ ರೆಂಡರ್‌ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಪ್ರಾಪ್ ಬದಲಾಗುತ್ತಿದ್ದರೆ, ಈ ಸಾಧನವು ಅದನ್ನು ತಕ್ಷಣವೇ ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ.

2. ಬ್ರೌಸರ್‌ನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್ (ಉದಾ., ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ)

ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ ರಿಯಾಕ್ಟ್-ನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿದ್ದರೂ, ಬ್ರೌಸರ್‌ನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್ ಕಚ್ಚಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯವನ್ನು ಅಳೆಯಲು ಅಂತಿಮ ಸಾಧನವಾಗಿದೆ. ಇದು ಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್‌ನಿಂದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಪೇಂಟಿಂಗ್‌ವರೆಗೆ ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ನಡೆಯುವ ಎಲ್ಲವನ್ನೂ ತೋರಿಸುತ್ತದೆ.

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ನ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು ಹೇಗೆ:

1. ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆದು 'ಪರ್ಫಾರ್ಮೆನ್ಸ್' ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ.
2. ರೆಕಾರ್ಡ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ.
3. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಕ್ರಿಯೆಯನ್ನು ಮಾಡಿ (ಉದಾ., ಭಾರವಾದ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಇರುವ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ).
4. ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ.
5. ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸಿ. 'Task' ಎಂದು ಲೇಬಲ್ ಮಾಡಲಾದ ಉದ್ದವಾದ ಬಾರ್ ಅನ್ನು ನೋಡಿ. ಈ ಟಾಸ್ಕ್‌ನೊಳಗೆ, ನೀವು ಈವೆಂಟ್ ಲಿಸನರ್ (ಉದಾ., 'Event: click') ಮತ್ತು ಅದು ಪ್ರಚೋದಿಸಿದ ಫಂಕ್ಷನ್‌ಗಳ ಕಾಲ್ ಸ್ಟಾಕ್ ಅನ್ನು ನೋಡುತ್ತೀರಿ. ಸ್ಟಾಕ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಹುಡುಕಿ ಮತ್ತು ಅದು ಚಲಾಯಿಸಲು ನಿಖರವಾಗಿ ಎಷ್ಟು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಂಡಿತು ಎಂದು ನೋಡಿ. 50ms ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಯಾವುದೇ ಟಾಸ್ಕ್ ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸುವ ಜ್ಯಾಂಕ್‌ಗೆ ಸಂಭಾವ್ಯ ಕಾರಣವಾಗಿದೆ.

ಪ್ರಾಯೋಗಿಕ ಪ್ರೊಫೈಲಿಂಗ್ ಸನ್ನಿವೇಶ: ಒಂದು ಹಂತ-ಹಂತದ ವಿಶ್ಲೇಷಣೆ

ಈ ಸಾಧನಗಳನ್ನು ಕಾರ್ಯರೂಪದಲ್ಲಿ ನೋಡಲು ಒಂದು ಸನ್ನಿವೇಶವನ್ನು ನೋಡೋಣ. ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ ಆಕ್ಷನ್ ಬಟನ್ ಇರುವ ಸಂಕೀರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ ಡೇಟಾ ಟೇಬಲ್ ಇದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.

ಕಾಂಪೊನೆಂಟ್ ಸೆಟಪ್

ನಮ್ಮ "ನಂತರದ" ಕೇಸ್‌ಗಾಗಿ useEvent ನ ನಡವಳಿಕೆಯನ್ನು ಅನುಕರಿಸುವ ಕಸ್ಟಮ್ ಹುಕ್ ನಮಗೆ ಬೇಕಾಗುತ್ತದೆ. ಇದು ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುವ ಮಾದರಿಯಾಗಿದ್ದು, ಕಾಲ್‌ಬ್ಯಾಕ್‌ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ref ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ.

            
import { useLayoutEffect, useRef, useCallback } from 'react';

// A custom hook to simulate the `useEvent` proposal
function useEventCallback(fn) {
  const ref = useRef(null);

  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback((...args) => {
    return ref.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

ಈಗ, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು:

            
// A memoized child component
const ActionButton = React.memo(({ onAction, label }) => {
  console.log(`Rendering button: ${label}`);
  return <button onClick={onAction}>{label}</button>;
});

// The parent component
function Dashboard() {
  const [searchTerm, setSearchTerm] = useState('');
  const [items] = useState([...Array(100).keys()]); // 100 items

  // **Scenario 1: The problematic inline function**
  const handleAction = (id) => {
    // Imagine this is a complex, slow function
    console.log(`Action for item ${id} with search: "${searchTerm}"`);
    let sum = 0;
    for (let i = 0; i < 10000000; i++) { // A deliberately slow operation
      sum += Math.sqrt(i);
    }
    console.log('Action complete');
  };

  // **Scenario 2: The optimized `useEventCallback` function**
  /*
  const handleAction = useEventCallback((id) => {
    console.log(`Action for item ${id} with search: "${searchTerm}"`);
    let sum = 0;
    for (let i = 0; i < 10000000; i++) { 
      sum += Math.sqrt(i);
    }
    console.log('Action complete');
  });
  */

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <div>
        {items.map(id => (
          <ActionButton
            key={id}
            // We pass a new function instance here on every render!
            onAction={() => handleAction(id)}
            label={`Action ${id}`}
          />
        ))}
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

ವಿಶ್ಲೇಷಣೆ 1: ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು

1. ಇನ್‌ಲೈನ್ ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ರನ್ ಮಾಡಿ: onAction={() => handleAction(id)}.
2. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರೊಫೈಲ್ ಮಾಡಿ: ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ, ಸರ್ಚ್ ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಒಂದು ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡಿ ಮತ್ತು ಪ್ರೊಫೈಲಿಂಗ್ ನಿಲ್ಲಿಸಿ.
3. ಅವಲೋಕನ: Dashboard ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗಿದೆ ಮತ್ತು ಮುಖ್ಯವಾಗಿ, ಎಲ್ಲ 100 ActionButton ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸಹ ಮರು-ರೆಂಡರ್ ಆಗಿರುವುದನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. onAction ಪ್ರಾಪ್ ಬದಲಾದ ಕಾರಣ ಹೀಗಾಗಿದೆ ಎಂದು ಪ್ರೊಫೈಲರ್ ಹೇಳುತ್ತದೆ. ಇದು ಒಂದು ದೊಡ್ಡ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಿದೆ.
4. ಈಗ, useEventCallback ಆವೃತ್ತಿಗೆ ಬದಲಿಸಿ: handleAction ನ ಆಪ್ಟಿಮೈಸ್ಡ್ ಆವೃತ್ತಿಯನ್ನು ಅನ್‌ಕಮೆಂಟ್ ಮಾಡಿ ಮತ್ತು ಪ್ರಾಪ್ ಅನ್ನು onAction={handleAction} ಗೆ ಬದಲಾಯಿಸಿ. ID ಅನ್ನು ಪಾಸ್ ಮಾಡಲು ನೀವು ಅದನ್ನು ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, ಸಣ್ಣ ವ್ರ್ಯಾಪರ್ ಕಾಂಪೊನೆಂಟ್ ರಚಿಸುವ ಮೂಲಕ ಅಥವಾ ಕರಿಯಿಂಗ್ ಮಾಡುವ ಮೂಲಕ, ಆದರೆ ಈ ಪರಿಕಲ್ಪನೆಗಾಗಿ, ಸ್ಥಿರತೆಯನ್ನು ತೋರಿಸಲು ನಾವು ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ ಕೆಳಗೆ ರವಾನಿಸಲಾದ ರೆಫರೆನ್ಸ್ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.
5. ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನೊಂದಿಗೆ ಮರು-ಪ್ರೊಫೈಲ್ ಮಾಡಿ: ಅದೇ ಕ್ರಿಯೆಯನ್ನು ಮಾಡಿ.
6. ಅವಲೋಕನ: Dashboard ರೆಂಡರ್ ಆಗಿರುವುದನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ, ಆದರೆ ActionButton ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಯಾವುದೂ ಮರು-ರೆಂಡರ್ ಆಗಿಲ್ಲ. ಅವುಗಳ ಪ್ರಾಪ್ಸ್ ಬದಲಾಗಲಿಲ್ಲ ಏಕೆಂದರೆ handleAction ಈಗ ಸ್ಥಿರ ಐಡೆಂಟಿಟಿ ಹೊಂದಿದೆ. ನಾವು ಮರು-ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸರಿಪಡಿಸಿದ್ದೇವೆ.

ವಿಶ್ಲೇಷಣೆ 2: ಹ್ಯಾಂಡ್ಲರ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯವನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು

ಈಗ, handleAction ಫಂಕ್ಷನ್‌ನ ನಿಧಾನಗತಿಯ ಮೇಲೆ ಗಮನಹರಿಸೋಣ. ದುಬಾರಿ for ಲೂಪ್ ಒಂದು ಭಾರವಾದ ಸಿಂಕ್ರೊನಸ್ ಟಾಸ್ಕ್ ಅನ್ನು ಅನುಕರಿಸುತ್ತದೆ.

1. ಆಪ್ಟಿಮೈಸ್ಡ್ useEventCallback ಕೋಡ್ ಬಳಸಿ.
2. ಬ್ರೌಸರ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್‌ನೊಂದಿಗೆ ಪ್ರೊಫೈಲ್ ಮಾಡಿ: ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಾರಂಭಿಸಿ, "Action" ಬಟನ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ, "Action complete" ಲಾಗ್‌ಗಾಗಿ ಕಾಯಿರಿ ಮತ್ತು ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿ.
3. ಅವಲೋಕನ: ಫ್ಲೇಮ್ ಚಾರ್ಟ್‌ನಲ್ಲಿ, ನೀವು ಬಹಳ ಉದ್ದವಾದ "Task" ಅನ್ನು ಕಾಣುತ್ತೀರಿ. ನೀವು ಜೂಮ್ ಇನ್ ಮಾಡಿದರೆ, ಕ್ಲಿಕ್ ಈವೆಂಟ್, ನಂತರ ನಮ್ಮ ಅನಾಮಧೇಯ ಫಂಕ್ಷನ್ ಕಾಲ್, ಮತ್ತು ನಂತರ handleAction ಫಂಕ್ಷನ್ ಗಮನಾರ್ಹ ಸಮಯವನ್ನು (ನೂರಾರು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಷ್ಟು) ತೆಗೆದುಕೊಳ್ಳುವುದನ್ನು ನೋಡುತ್ತೀರಿ. ಈ ಸಮಯದಲ್ಲಿ, ಸಂಪೂರ್ಣ UI ಸ್ಥಗಿತಗೊಂಡಿತ್ತು. ನೀವು ಬೇರೆ ಏನನ್ನೂ ಕ್ಲಿಕ್ ಮಾಡಲು ಅಥವಾ ಪುಟವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ. ಇದು ಮುಖ್ಯ-ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ.

ಹ್ಯಾಂಡ್ಲರ್‌ನ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದು

ಅಡಚಣೆಯನ್ನು ಗುರುತಿಸುವುದು ಅರ್ಧ ಯುದ್ಧ ಗೆದ್ದಂತೆ. ಈಗ, ಅದನ್ನು ಹೇಗೆ ಸರಿಪಡಿಸುವುದು? ಕಾರ್ಯತಂತ್ರವು ಕಾರ್ಯದ ಸ್ವರೂಪವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.

• ಡಿಬೌನ್ಸಿಂಗ್/ಥ್ರಾಟ್ಲಿಂಗ್: ಕ್ಲಿಕ್‌ಗೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ, ಆದರೆ ಮೌಸ್ ಚಲನೆಗಳು ಅಥವಾ ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಯಂತಹ ಆಗಾಗ್ಗೆ ಸಂಭವಿಸುವ ಈವೆಂಟ್‌ಗಳಿಗೆ ಅವಶ್ಯಕ.
• ಆಂತರಿಕ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮೆಮೊೈಸ್ ಮಾಡಿ: ನಿಧಾನವಾದ ಭಾಗವು ಇನ್‌ಪುಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಶುದ್ಧ ಲೆಕ್ಕಾಚಾರವಾಗಿದ್ದರೆ, ಫಲಿತಾಂಶವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ useMemo ಅನ್ನು ಬಳಸಬಹುದು.
• ವೆಬ್ ವರ್ಕರ್‌ಗೆ ಕೆಲಸವನ್ನು ವರ್ಗಾಯಿಸಿ: ಭಾರವಾದ, UI-ಸಂಬಂಧವಿಲ್ಲದ ಗಣನೆಗಳಿಗೆ ಇದು ಆದರ್ಶ ಪರಿಹಾರವಾಗಿದೆ. ವೆಬ್ ವರ್ಕರ್ ಪ್ರತ್ಯೇಕ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಇದು ಮುಖ್ಯ UI ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ. ನೀವು ಅಗತ್ಯವಿರುವ ಡೇಟಾವನ್ನು ವರ್ಕರ್‌ಗೆ ಪೋಸ್ಟ್ ಮಾಡಬಹುದು, ಮತ್ತು ಅದು ಮುಗಿದ ನಂತರ ಫಲಿತಾಂಶದೊಂದಿಗೆ ಸಂದೇಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• ಕಾರ್ಯವನ್ನು ವಿಭಜಿಸಿ: ವೆಬ್ ವರ್ಕರ್ ಅತಿಯಾಗಿದ್ದರೆ, ನೀವು ಕೆಲವೊಮ್ಮೆ ದೀರ್ಘ ಕಾರ್ಯವನ್ನು setTimeout(..., 0) ಬಳಸಿ ಸಣ್ಣ ತುಂಡುಗಳಾಗಿ ವಿಭಜಿಸಬಹುದು. ಇದು ತುಂಡುಗಳ ನಡುವೆ ಬ್ರೌಸರ್‌ಗೆ ನಿಯಂತ್ರಣವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇತರ ಈವೆಂಟ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಮತ್ತು UI ಅನ್ನು ಸ್ಪಂದನಶೀಲವಾಗಿಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉತ್ತಮ-ಕಾರ್ಯಕ್ಷಮತೆಯ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಮ್ಮ ವಿಶ್ಲೇಷಣೆಯ ಆಧಾರದ ಮೇಲೆ, ನಾವು ಜಾಗತಿಕ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಒಂದು ಗುಂಪನ್ನು ರೂಪಿಸಬಹುದು:

1. ಫಂಕ್ಷನ್ ಸ್ಥಿರತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಮೆಮೊೈಸ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ರವಾನಿಸಲಾದ ಯಾವುದೇ ಫಂಕ್ಷನ್‌ಗೆ, ಅದು ಸ್ಥಿರ ಐಡೆಂಟಿಟಿ ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. useCallback ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ, ಅಥವಾ ನಮ್ಮ useEventCallback ಕಸ್ಟಮ್ ಹುಕ್‌ನಂತಹ ಮಾದರಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಅದು ಮುಂಬರುವ useEvent ನಡವಳಿಕೆಯನ್ನು ಅನುಕರಿಸುತ್ತದೆ.
2. ಪ್ರಾಪ್ಸ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಮೆಮೊೈಸ್ಡ್ ಚೈಲ್ಡ್‌ಗೆ ರವಾನಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ನ JSX ನಲ್ಲಿ onClick={() => doSomething()} ಅನ್ನು ಎಂದಿಗೂ ಬಳಸಬೇಡಿ. ಇದು ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಫಂಕ್ಷನ್ ಅನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
3. ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಹಗುರವಾಗಿಡಿ: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಒಂದು ಹಗುರವಾದ ಸಂಯೋಜಕನಾಗಿರಬೇಕು. ಅದರ ಕೆಲಸವೆಂದರೆ ಈವೆಂಟ್ ಅನ್ನು ಹಿಡಿದು ಭಾರವಾದ ಕೆಲಸವನ್ನು ಬೇರೆಡೆಗೆ ವಹಿಸುವುದು. ಸಂಕೀರ್ಣ ಡೇಟಾ ರೂಪಾಂತರಗಳನ್ನು ಅಥವಾ ನಿರ್ಬಂಧಿಸುವ API ಕರೆಗಳನ್ನು ನೇರವಾಗಿ ಹ್ಯಾಂಡ್ಲರ್ ಒಳಗೆ ಚಲಾಯಿಸಬೇಡಿ.
4. ಪ್ರೊಫೈಲ್ ಮಾಡಿ, ಊಹಿಸಬೇಡಿ: ಅಕಾಲಿಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನೇಕ ಸಮಸ್ಯೆಗಳ ಮೂಲವಾಗಿದೆ. ನೀವು ಕೋಡ್ ಬದಲಾಯಿಸಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೈಜ ಅಡಚಣೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯಲು ರಿಯಾಕ್ಟ್ ಪ್ರೊಫೈಲರ್ ಮತ್ತು ಬ್ರೌಸರ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್ ಬಳಸಿ.
5. ಈವೆಂಟ್ ಲೂಪ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಸಿಂಕ್ರೊನಸ್, ದೀರ್ಘಕಾಲ ಚಾಲನೆಯಲ್ಲಿರುವ ಕೋಡ್ ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಅನ್ನು ಸ್ಥಗಿತಗೊಳಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಆಂತರಿಕವಾಗಿ ಗ್ರಹಿಸಿ. ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಿಂದ ಹೊರಗೆ ಅಥವಾ ಅಸಿಂಕ್ರೊನಸ್ ಆಗಿ ಕೆಲಸವನ್ನು ಹೇಗೆ ಮಾಡುವುದು ಎಂಬುದರ ಬಗ್ಗೆ ಯಾವಾಗಲೂ ಯೋಚಿಸಿ.

ತೀರ್ಮಾನ: ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್‌ನ ಭವಿಷ್ಯ

ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆಯು ಅಮೂರ್ತದಿಂದ (ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್‌ಗಳು) ಮೂರ್ತದವರೆಗೆ (ಮಿಲಿಸೆಕೆಂಡ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಮಯಗಳು) ಒಂದು ಪ್ರಯಾಣವಾಗಿದೆ. useEvent ಪ್ರಸ್ತಾಪದ ಹಿಂದಿನ ತತ್ವಗಳು ಈ ಪ್ರಯಾಣದ ಮೊದಲ ಭಾಗಕ್ಕೆ ಒಂದು ಶಕ್ತಿಯುತ ಮಾನಸಿಕ ಮಾದರಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ: ಮೆಮೊೈಸೇಶನ್ ಅನ್ನು ಸರಳಗೊಳಿಸುವುದು ಮತ್ತು ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಕಾಂಪೊನೆಂಟ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು. ಫಂಕ್ಷನ್ ಐಡೆಂಟಿಟಿಗಳು ಸ್ಥಿರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಕಾಡುವ ಒಂದು ದೊಡ್ಡ ವರ್ಗದ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ನಾವು ನಿವಾರಿಸುತ್ತೇವೆ.

ಆದಾಗ್ಯೂ, ನಿಜವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪಾಂಡಿತ್ಯವು ಬಳಕೆದಾರರು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದಾಗ ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಕೋಡ್‌ನೊಳಗೆ, ಆಳವಾಗಿ ನೋಡಲು ನಮ್ಮನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ. ಬ್ರೌಸರ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲರ್‌ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ನಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ವಿಭಜಿಸಬಹುದು, ಮುಖ್ಯ ಥ್ರೆಡ್‌ನ ಮೇಲೆ ಅವುಗಳ ಪ್ರಭಾವವನ್ನು ಅಳೆಯಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಡೇಟಾ-ಚಾಲಿತ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು.

ರಿಯಾಕ್ಟ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಾ ಹೋದಂತೆ, ಉತ್ತಮ, ವೇಗದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್‌ಗಳನ್ನು ಸಬಲೀಕರಣಗೊಳಿಸುವುದರ ಮೇಲೆ ಅದರ ಗಮನ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ. ಈ ಪ್ರೊಫೈಲಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಇಂದು ಅರ್ಥಮಾಡಿಕೊಂಡು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಕೇವಲ ಪ್ರಸ್ತುತ ಬಗ್‌ಗಳನ್ನು ಸರಿಪಡಿಸುತ್ತಿಲ್ಲ; ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ, ಸ್ಪಂದನಶೀಲ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಪ್ರಮಾಣಿತವಾಗಿರುವ, ಅಪವಾದವಲ್ಲದ ಭವಿಷ್ಯಕ್ಕಾಗಿ ಸಿದ್ಧರಾಗುತ್ತಿದ್ದೀರಿ.